<template>
	<div class="client-panel">
		<div v-if="isLogin">
			<h1>欢迎登录</h1>
			<div class="login-container">
				<input class="account" v-model="account" type="text" placeholder="input you account">
				<input class="password" v-model="password"  type="password" placeholder="input you password">
				<input class="btn-login" type="submit" value="Login">
			</div>
		</div>
		<div v-else>
			<h1>我要注册</h1>
			<div class="login-container">
				<input class="account" v-model="account" type="text" placeholder="input you account">
				<input class="password" v-model="password"  type="password" placeholder="input you password">
				<input class="btn-login" type="submit" value="Register">
			</div>
		</div>
	</div>
</template>

<script>
import {login, register} from '../../api/user.js'

export default {
	data() {
		return {
			isLogin: false,
			account: '',
			password: '',
			type: 100				// 客户端类型 100 普通账号用户
		}
	},
	methods: {

		// 提交参数校验
		onVerify() {
			if (this.account) { 
				console.log('') 
				return
			}
			if (this.password) { 
				console.log('') 
				return
			}
		},

		// 登录请求
		onLogin() {
			this.onVerify()
			const params = {
				"account": this.account,
				"password": this.password,
				"type": this.type
			}

			login(params).then(res=>{
				// TODO
				// 登录成功, 保存 token 跳转到我的页面
				console.log(res)
			}).catch(err=>{
				console.log(err)
			})
		},

		// 注册请求
		onRegister() {
			this.onVerify()

			const params = {
				"account": this.account,
				"password": this.password,
				"type": this.type
			}

			login(params).then(res=>{
				// TODO
				// 注册成功
				// 自动登录 保存 token 跳转到我的页面
				this.onLogin()
				console.log(res)
			}).catch(err=>{
				console.log(err)
			})
		},

		// 切换去注册
		toChangeRegister() {
			this.isLogin = false
		},

		// 切换去登录
		toChangeLogin() {
			this.isLogin = true
		},

		// 重置输入框
		resetInputValue() {
			this.account = ''
			this.password = ''
		}
	}
}
</script>

<style scoped lang="scss">
@import '../../assets/style/color.scss';
@import '../../assets/style/mixin.scss';

.client-panel {
	width: 100%;
	background-color: #f5f5f5;
	margin-top: 50px;
	h1 {
		font-size: 24px;
		font-weight: 600px;
		text-align: center;
	}
	.login-container {
		width: 80%;
		margin: auto;
		display: flex;
		flex-direction: column;
		input {
			width: 100%;
			height: 36px;
			line-height: 36px;
			margin-top: 20px;
			padding-left: 5px;
			border: none;
			border-radius: 4px;
		}
		input:last-child {
			margin: 10px auto;
			text-align: center;
			background-color: $color-bg-fa;
			color: $color-text-f;
			font-size: $font-size-16;
		}
	}
}
</style>